<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <h1>购物车首页</h1>
        <div class="card-header-btns">
          <RouterLink to='/'>
            <el-button type="primary">商品列表</el-button>
          </RouterLink>
          <RouterLink to='/shoppingCar'>
          <el-button type="primary">购物车</el-button>
          </RouterLink>
        </div>
      </div>
    </template>

    <RouterView />
  </el-card>
</template>

<script setup>
import { RouterView, RouterLink } from 'vue-router'
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  .el-button {
    &:first-child{
        margin-right:20px;
    }
  }
}
</style>
